<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- vue绑定方法  不推荐 -->
        <div v-on:click='count++'> 数量加： {{count}}</div>
        <div v-on:click='count--'> 数量减： {{count}}</div>
        <!-- v-on 简写 @ -->
        <!-- <button @click='方法的名字' >点击绑定事件</button> -->

        <!--第二种绑定方法 推荐的写法 -->
        <button @click='myClick'>点击绑定事件</button>

        <!--  绑定方法传递参数   @click='getParams(实参)-->
        <button @click='getParams("你好","xxxx")'> 绑定方法传递参数</button>


        <button @click='handlerClick'> 绑定方法传递参数</button> 
    
        <button @click='handlerText'> 绑定方法获取里面的文字内容</button>
   
        <!-- 如果有参数需要传递 那么这个e 对象必须要写 而且只能写成$event  并且只能写在最后面 -->
        <button @click='handlerManyParams(5,10,$event)'> 绑定方法如果需要传递多个参数并且要获取e对象</button>
   
    </div>

 

            <script>
                new Vue({
                    el: "#app",
                    data: {
                        count: 1
                    },
                    methods: { //所有的方法都写在这个里面


                        myClick() {
                            alert(1)
                        },
                        // getParams(形式参数名字随便取) {

                        // }
                        getParams(a, b) {
                            alert(a)
                            alert(b)

                        },
                        handlerClick() {
                            alert(this.count)
                        },
                        //这里有一个默认的参数就事件对象e 
                        handlerText(e) { // 
                            e.target.style.color='red'
                            console.log(e.target.innerText)

                        },

                        handlerManyParams(a,b,e) {
                            console.log(a)
                            console.log(b)
                            console.log(e)
                            e.target.style.color='green'
                        }


                    }
                })

            </script>
</body>

</html>